import 'package:animations/animations.dart';
import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:yuque/app_theme.dart';
import 'package:yuque/page/page_search.dart';
import 'package:yuque/routes.dart';
import 'package:yuque/widgets/action_card.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 2,
      child: Padding(
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _appBar(),
            Expanded(
                child: Stack(
              children: [
                MediaQuery.removePadding(
                  context: context,
                  removeTop: true,
                  child: TabBarView(
                    children: [
                      ListView.separated(
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 12.0),
                            child: GestureDetector(
                              onTap: () {
                                Navigator.pushNamed(context, Routes.post, arguments: index);
                              },
                              child: ActionCard(
                                child: Container(
                                  height: 220,
                                  padding: EdgeInsets.all(15),
                                  child: Text("你好"),
                                ),
                                actions: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      "2021-01-04",
                                      style: TextStyle(
                                        color: AppTheme.deactivatedText,
                                        fontSize: 14,
                                      ),
                                    ),
                                    Icon(
                                      LucideIcons.moreHorizontal,
                                      size: 14,
                                      color: AppTheme.deactivatedText,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        },
                        itemCount: 2,
                        separatorBuilder: (BuildContext context, int index) {
                          return SizedBox(height: 15);
                        },
                      ),
                      Center(
                        child: Text("待办"),
                      )
                    ],
                  ),
                ),
                Positioned(
                  right: 20,
                  bottom: 70,
                  child: GestureDetector(
                    onTap: () {},
                    child: Container(
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        boxShadow: [
                          BoxShadow(
                            color: AppTheme.grey.withOpacity(0.2),
                            blurRadius: 12,
                            offset: Offset(5, 8),
                          )
                        ],
                        gradient: LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [Color(0xFF14D2B6), Color(0xFF3BE995), Color(0xB805F486)],
                          stops: [0.0, 0.48, 1.0],
                        ),
                      ),
                      child: Icon(
                        LucideIcons.feather,
                        color: Colors.white,
                        size: 20,
                      ),
                    ),
                  ),
                )
              ],
            )),
          ],
        ),
      ),
    );
  }

  Widget _appBar() {
    var _tabColor = Theme.of(context).primaryColor;
    return Container(
      height: kToolbarHeight,
      padding: EdgeInsets.all(11),
      child: Row(
        children: [
          IgnorePointer(
            child: SizedBox(
              width: kToolbarHeight,
            ),
          ),
          Expanded(
            child: TabBar(
              isScrollable: true,
              labelColor: AppTheme.darkGrey,
              indicator: CustomWidthUnderlineTabIndicator(
                borderSide: BorderSide(width: 2.0, color: _tabColor),
              ),
              tabs: [
                Tab(
                  child: Text("小记"),
                ),
                Tab(
                  child: Text("待办"),
                )
              ],
            ),
          ),
          SizedBox(
            width: kToolbarHeight * 2,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: [
                InkWell(
                  onTap: () {
                    Navigator.of(context).push(PageRouteBuilder(
                      pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
                        return SearchPage();
                      },
                      transitionsBuilder: (context, animation, secondaryAnimation, child) {
                        return SharedAxisTransition(
                          fillColor: Colors.transparent,
                          child: child,
                          animation: animation,
                          secondaryAnimation: secondaryAnimation,
                          transitionType: SharedAxisTransitionType.horizontal,
                        );
                      },
                    ));
                    // Navigator.push(context, route)
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Icon(
                      LucideIcons.search,
                      size: 20,
                    ),
                  ),
                ),
                InkWell(
                  onTap: () {
                    showFilterModal();
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Icon(
                      LucideIcons.filter,
                      size: 20,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void showFilterModal() {
    showModalBottomSheet<void>(
      context: context,
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return FractionallySizedBox(
          heightFactor: 0.7,
          child: Container(
            padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 8),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  SizedBox(
                    height: 40,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(width: 50),
                        Expanded(
                          child: Center(
                              child: Text(
                            "筛选",
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                            ),
                          )),
                        ),
                        SizedBox(
                          width: 50,
                          child: GestureDetector(
                            onTap: () => Navigator.of(context).pop(),
                            child: Icon(
                              Icons.close,
                              color: AppTheme.deactivatedText,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Divider(),
                  Expanded(child: Container()),
                  Divider(),
                  SizedBox(
                    height: 60,
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8, bottom: 16.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            width: 150,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              border: Border.all(color: AppTheme.whiteGrey),
                              borderRadius: BorderRadius.circular(5),
                            ),
                            child: Text(
                              "重置",
                              style: TextStyle(
                                color: AppTheme.darkText,
                              ),
                            ),
                          ),
                          Container(
                            width: 150,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: AppTheme.green,
                              borderRadius: BorderRadius.circular(5),
                            ),
                            child: Text(
                              "查看",
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}
